import React from "react";
import "./HomeButton.css";
import tu1 from "../../../assets/tabIcon/智能检测.png";
import tu2 from "../../../assets/tabIcon/智能检测 Normal.png";
import tu3 from "../../../assets/tabIcon/就业态势.png";
import tu4 from "../../../assets/tabIcon/就业态势 Normal.png";
import tu5 from "../../../assets/tabIcon/安防管理.png";
import tu6 from "../../../assets/tabIcon/安防管理 Normal.png";
import tu7 from "../../../assets/tabIcon/设备运维.png";
import tu8 from "../../../assets/tabIcon/设备运维 Normal.png";
function HomeButton() {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const data = [
    {
      img: tu1,
      activeImg: tu2,
    },
    {
      img: tu3,
      activeImg: tu4,
    },
    {
      img: tu5,
      activeImg: tu6,
    },
    {
      img: tu7,
      activeImg: tu8,
    },
  ];
  return (
    <div className="home-button-container">
      {data.map((item) => {
        return (
          <div
            key={item.img}
            onClick={() => setActiveIndex(data.indexOf(item))}
          >
            <img
              src={
                activeIndex === data.indexOf(item) ? item.img : item.activeImg
              }
              alt=""
            />
          </div>
        );
      })}
    </div>
  );
}

export default HomeButton;
